<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onUnmounted } from 'vue'

import { clear, count, result } from './data'
import { imagePath } from '@/libs/file-utils'
import { backToMain } from '@/libs/common'

const img_bg = imagePath('quiz/love/bg.jpg')
const img_title = imagePath('quiz/love/title.png')
const img_card = imagePath('quiz/love/card.png')
const card_progress = imagePath('quiz/love/card-progress.png')
const card_desc = imagePath('quiz/love/result/card-desc.png')

result.value ? onUnmounted(clear) : backToMain()
</script>

<template>
  <PageWrapper
    name="quiz-love-result"
    :pageStyle="{ backgroundImage: img_bg }"
  >
    <div
      class="card"
      :style="{ backgroundImage: img_card }"
    >
      <div
        class="title"
        :style="{ backgroundImage: img_title }"
      ></div>

      <div
        class="card-progress"
        :style="{ backgroundImage: card_progress }"
      >
        <div class="progress"><span class="value">{{ count }}</span> /{{ count }}题</div>
        <div class="bar">
          <div class="inner"></div>
        </div>
        <div class="precent">100%</div>
      </div>

      <div
        class="card-desc"
        :style="{ backgroundImage: card_desc }"
      >
        <div class="text">{{ result?.description }}</div>
      </div>
    </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.card {
  position: relative;
  width: 742rpx;
  height: 1328rpx;

  margin-top: 30rpx;
  margin-left: 6rpx;

  .title {
    position: absolute;
    top: 180rpx;
    left: 70rpx;

    width: 316rpx;
    height: 179rpx;
  }

  .card-progress {
    position: absolute;
    top: 186rpx;
    right: 66rpx;

    width: 272rpx;
    height: 186rpx;

    .progress {
      position: absolute;
      top: 32rpx;
      right: 38rpx;

      color: #876ACA;
      text-shadow: 0 0 6rpx rgba(171, 43, 0, .34);
      font-size: 48rpx;
      line-height: 68rpx;

      .value {
        color: #FFEA84;
        font-size: 64rpx;
      }
    }

    .bar {
      position: absolute;
      bottom: 50rpx;
      left: 36rpx;

      width: 156rpx;
      height: 20rpx;

      border-radius: 10rpx;
      box-shadow: inset 0 2rpx 6rpx 10rpx rgba(171, 43, 0, .25);

      .inner {
        width: 100%;
        height: 100%;

        border-radius: 10rpx;

        background-image: linear-gradient(90deg, #FF9A36 0%, #FFEA84 100%);
        box-shadow: 0 -4rpx 8rpx 0 rgba(239, 68, 0, .41) inset;
      }
    }

    .precent {
      position: absolute;
      bottom: 48rpx;
      right: 36rpx;

      color: #FFE983;
      text-shadow: 0 2rpx 2rpx rgba(171, 43, 0, .25);
      font-size: 20rpx;
      line-height: 28rpx;
    }
  }

  .card-desc {
    position: absolute;
    top: 380rpx;
    right: 66rpx;

    width: 612rpx;
    height: 858rpx;

    box-sizing: border-box;
    padding: 36rpx 40rpx 36rpx 44rpx;

    .text {
      width: 100%;
      height: 100%;

      box-sizing: border-box;
      padding-bottom: 20rpx;

      color: #5A2042;
      font-size: 40rpx;
      line-height: 48rpx;

      overflow: auto;
      touch-action: pan-y;
    }
  }
}
</style>